<template>
    <div class="container">
        <h1 class="text-left">郵送先住所</h1>
        <p class="mb-4 text-left">ユーザーの皆様、再配信が確実に行われるよう、フォームに慎重にご記入ください。</p>
        <!-- <van-form class="flex flex-col items-center">
            <div class="w-full mb-4 form-item">
                <label for="">
                    あなたの名前
                </label>
                <van-field :border="false" required v-model="form.name" name="name"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
            </div>
            <input class="button" type="submit" value="すぐに更新する">
        </van-form> -->
        <BaseForm :fields="[
            {
                label: 'あなたの名前',
                key: 'name',
                props: {
                    required: true,
                    rules: [
                        {
                            required: true,
                            message: '请输入あなたの名前',
                        },
                    ],
                },
            },
            {
                label: '地址',
                key: 'address',
                props: {
                    required: true,
                    placeholder: '街道地址',
                    rules: [
                        {
                            required: true,
                            message: '请输入地址',
                        },
                    ],
                },
            },
            {
                label: '详情地址',
                key: 'xxaddress',
                props: {
                    placeholder: '公寓号、房间号等',
                }
            },
            {
                label: '市',
                key: 'city',
                props: {
                    required: true,
                    rules: [
                        {
                            required: true,
                            message: '市区を入力願います。',
                        },
                    ],
                },
            },
            {
                label: '州/県/区',
                key: 'province',
                props: {
                    required: true,
                    rules: [
                        {
                            required: true,
                            message: '州/県/区を入力します。',
                        },
                    ],
                },
            },
            {
                label: '郵便番号',
                key: 'code',
                props: {
                    required: true,
                    rules: [
                        {
                            required: true,
                            message: '郵便番号をお願いします。',
                        },
                    ],
                },
            },
            {
                label: 'Eメール',
                key: 'email',
                props: {
                    required: true,
                    rules: [
                        {
                            required: true,
                            message: 'eメールをお願いします。',
                        },
                    ],
                },
            },
            {
                label: '電話番号',
                key: 'phone',
                props: {
                    required: true,
                    rules: [
                        {
                            required: true,
                            message: '電話番号をお願いします。',
                        },
                    ],
                },
            },
        ]" ref="formInstance">
            <div @click="onSubmit"> <input class="button" type="submit" value="すぐに更新する">
            </div>
        </BaseForm>
    </div>
</template>
<script lang="ts" setup>
import BaseForm from "@/components/BaseForm.vue";
const router = useRouter()
const formInstance = ref()
const onSubmit = () => {
    formInstance.value.onSubmit().then(() => {
        router.push('/bind')
    })
}
</script>
<style lang="scss" scoped>
.container {
    padding: 40px 15px 30px 15px;
    margin-top: 60px;
    font-size: 14px;
    text-align: center;

    .form {}

    .button {
        display: inline-block;
        background-color: #141414;
        color: #fff;
        font-weight: 700;
        border: none;
        border-radius: 5px;
        padding: 8px 50px;
        box-shadow: 0 0 4px rgba(128, 128, 128, .5);
        align-self: center;
    }


}
</style>